<template>
  <div class="addstore">
    <div class="cont">
      <div class="list">
        <ul>
          <li>
            <p>地市区县:</p>
            <van-field
              v-model="fieldValue"
              placeholder="请选择"
              right-icon="arrow"
              :disabled="fieldValue ? false : true"
              @click="show = true"
            />
          </li>
          <li>
            <p>门店名称:</p>
            <van-field v-model="form.shopName" placeholder="请输入门店名称" />
          </li>
          <li>
            <p>门店地址:</p>
            <van-field v-model="form.address" placeholder="请输入门店地址" />
          </li>
          <li>
            <p>店长姓名:</p>
            <van-field v-model="form.shopManage" placeholder="请输入店长姓名" />
          </li>
          <li>
            <p>手机号码:</p>
            <van-field v-model="form.phone" placeholder="请输入手机号码" />
          </li>
        </ul>
      </div>
      <div class="button">
        <van-button
          type="info"
          block
          @click="add"
          :disabled="
            form.countyId &&
            form.shopName &&
            form.address &&
            form.shopManage &&
            form.phone
              ? false
              : true
          "
          >提交</van-button
        >
      </div>
      <van-popup v-model="show" round position="bottom" :lazy-render="false">
        <van-cascader
          v-model="form.countyId"
          :field-names="fieldNames"
          title="请选择所在地区"
          :options="cityList"
          @close="show = false"
          @finish="onFinish"
          @change="onChange"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { cityList, countyList, saveShop } from './service/service.js'
export default {
  data () {
    return {
      show: false,
      form: {
        countyId: '',
        shopName: '',
        address: '',
        shopManage: '',
        phone: '',
        opt: 'add',
        shopId: '0',
        cityId: -1
      },
      cityList: [],

      fieldValue: '',
      fieldNames: {
        text: 'orgname',
        value: 'orgid',
        children: 'children'
      }
    }
  },
  created () {
    this.getcity()
    this.form.opt = this.$route.params.opt
    if (this.form.opt === 'edit') {
      this.form.countyId = this.$route.params.countyId
      this.form.shopName = this.$route.params.shopName
      this.form.address = this.$route.params.address
      this.form.shopManage = this.$route.params.shopManage
      this.form.phone = this.$route.params.phone
      this.form.shopId = this.$route.params.shopId
      this.form.cityId = this.$route.params.cityId
      this.fieldValue = (this.$route.params.cityName || '') + (this.$route.params.countyName || '')
    }
  },
  methods: {
    add () {
      saveShop(this.form).then((res) => {
        if (res.data.ret === 0) {
          this.$toast.success(res.data.msg)
          this.$router.back()
        } else {
          this.$toast.fail(res.data.msg)
        }
      })
    },
    getcity () {
      cityList().then((res) => {
        if (res.data.ret === 0) {
          this.cityList = res.data.cityList.filter((element) => {
            this.$set(element, 'children', [])
            return element.orgid !== 0
          })
        }
      })
    },
    onChange (value) {
      console.log(value)
      const id = value.selectedOptions[0].orgid
      if (id === 0) return
      this.getcount(id)
    },
    onFinish ({ selectedOptions }) {
      if (selectedOptions.length === 2) {
        this.form.cityId = selectedOptions[0].orgid
        this.form.countyId = selectedOptions[1].orgid
      }

      this.show = false
      this.fieldValue = selectedOptions
        .map((option) => option.orgname
        )
        .join('')
    },
    getcount (id) {
      countyList({ cityId: id }).then((res) => {
        if (res.data.ret === 0) {
          const countyList = res.data.countyList
          this.cityList.forEach((element, index) => {
            if (id === element.orgid) {
              this.cityList[index].children = countyList
            }
          })
        } else {
          this.$toast.fail('网络错误')
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>
.addstore {
  font-family: PingFangSC-Regular, PingFang SC;
  .cont {
    margin: 15px 15px 0;
    padding: 0 15px;
    padding-top: 0.1px;
    padding-bottom: 11vh;
    background: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    .list {
      margin-bottom: 7.8vh;
      li {
        p {
          font-size: 14px;
          color: #666666;
          margin-top: 15px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
.van-cell {
  background-color: #f2f6fb;
  border-radius: 4px;
}
/deep/ .van-field__right-icon {
  color: #bebebe;
}
</style>
